<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div class="box"></div>
    <script>
        // 鼠标事件
        // 1.click 鼠标左键单击事件。
        // var btn = document.querySelector("button");
        // btn.onclick = function(){
        //     console.log("点击了鼠标的左键");
        // }


        // 2.鼠标按钮的时候执行的事件 ： mousedown
        // var boxEle = document.querySelector(".box");
        // boxEle.onmousedown = function(){
        //     console.log("鼠标按下的时候执行");
        // }


        // 3.鼠标移动的时候触发的事件 ： mousemove 
        // var boxEle = document.querySelector(".box");
        // boxEle.onmousemove = function(){
        //     console.log("鼠标在事件源上移动的时候触发");
        // }

        // 4.鼠标抬起的时候执行的事件： mouseup
        // var boxEle = document.querySelector(".box");
        // boxEle.onmouseup = function(){
        //     console.log("鼠标抬起的时候执行");
        // }

        // 5.鼠标覆盖的时候触发 ：mouseover
        // var boxEle = document.querySelector(".box");
        // boxEle.onmouseover = function(){
        //     console.log("鼠标覆盖了");
        // }

        // 6.鼠标移除元素的时候触发的事件： mouseout
        // var boxEle = document.querySelector(".box");
        // boxEle.onmouseout = function(){
        //     console.log("鼠标移除的时候触发");
        // }

        // boxEle.onmouseover = function(){
        //     console.log("鼠标覆盖了");
        // }


        // 7.鼠标进入的时候执行： mouseenter
        // var boxEle = document.querySelector(".box");
        // boxEle.onmouseenter = function(){
        //     console.log("鼠标进入了");
        // }

        // 8.鼠标离开的时候触发事件： mouseleave
        // var boxEle = document.querySelector(".box");
        // boxEle.onmouseenter = function(){
        //     console.log("鼠标进入了");
        // }
        // boxEle.onmouseleave = function(){
        //     console.log("鼠标离开了");
        // }



    </script>
</body>
</html>